<template>
  <div class="crud-opts">
      <span class="crud-flex">
        <!--左侧插槽-->
        <slot name="left"/>
        <img class="img" src="@images/update.png" alt="" @click="doReply()">
        <!--更多操作-->
        <el-popover v-if="checkPermission(['appToRunQueue:run', 'appToRunQueue:run', 'appToRunQueue:down', 'appToRunQueue:top', 'appToRunQueue:del'])"
                    placement="bottom" width="100" style="height:30px" trigger="click">
            <img class="img" slot="reference" src="@images/more.png" alt="">
            <el-row>
                <el-button type="text" @click="toRunImplement(crud.selections[0])"
                           v-permission="permission.run==undefined ? ['']:permission.run"
                           :disabled="crud.selections.length !== 1">立即执行</el-button>
            </el-row>
          <el-row>
                <el-button type="text" @click="toRunSort(crud.selections[0],'up')"
                           v-permission="permission.up==undefined ? ['']:permission.up"
                           :disabled="crud.selections.length !== 1">升序</el-button>
            </el-row>
            <el-row>
                <el-button type="text" @click="toRunSort(crud.selections[0],'down')"
                           v-permission="permission.down==undefined ? ['']:permission.down"
                           :disabled="crud.selections.length !== 1">降序</el-button>
            </el-row>
            <el-row>
                <el-button type="text" @click="toRunTop(crud.selections[0])"
                           v-permission="permission.top==undefined ? ['']:permission.top"
                           :disabled="crud.selections.length !== 1">置顶</el-button>
            </el-row>
            <el-row>
                <el-button type="text" @click="toRunRemove(crud.selections)"
                           v-permission="permission.del==undefined ? ['']:permission.del"
                           :disabled="crud.selections.length == 0">移除</el-button>
            </el-row>
        </el-popover>
        <el-button-group style="height:30px">
          <img class="img" v-if="crud.props.searchToggle" src="@images/search.png" alt=""
               @click="toggleSearch()">
          <div style="display: inline-block;display:flex;align:center" class="select">
      <img class="img" style="margin-right:0px !important" v-if="!crud.props.searchToggle"
           src="@images/hidden.png" alt="" @click="toggleSearch()">
            <el-input
              placeholder="请输入内容"
              v-model="qryParam"
              style="width: 300px;"
              class="input-with-select"
              @change="paramChange"
              v-if="!crud.props.searchToggle"
              clearable
            >
              <el-select
                v-model="qryCloum"
                @change="cloumChange"
                slot="prepend"
                filterable
                placeholder="请选择"
                style="width: 100px"
              >
                <el-option
                  v-for="(item, i) in crud.queryList"
                  :key="i"
                  :label="item.cloumName"
                  :value="item.cloumValue"
                ></el-option>
              </el-select>
            </el-input>
            <img class="img" v-if="!crud.props.searchToggle" slot="append" src="@images/search.png"
                 alt="" @click="doQuery">
          </div>
        </el-button-group>
        <!--右侧-->
        <slot name="right"/>
      </span>

    <el-button-group style="margin-top: 8px;" class="crud-opts-right">
      <el-pagination
        :page-size.sync="page.size"
        :total="page.total"
        :current-page.sync="page.page"
        style="margin-top: 8px;"
        layout="prev, pager, next,sizes,total"
        @size-change="crud.sizeChangeHandler($event)"
        @current-change="crud.pageChangeHandler"
        :pager-count="3" prev-text=" " next-text=" "
      />
    </el-button-group>
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>
      <el-form
        ref="form"
        :model="form"
        label-position="left"
        label-width="150px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="降升序值" prop="num">
              <el-input-number v-model="num" :min="0"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <div class="form-operator-button">
            <el-button
              class="el-button el-button--primary el-button--small"
              type="primary"
              @click="submintSort"
              style="margin-right: 100px">提交
            </el-button
            >
            <el-button
              class="el-button el-button--default el-button--small"
              type="button"
              @click="channel">取消
            </el-button>
          </div>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import CRUD, {crud, pagination} from "@crud/crud";
import {MessageBox} from "element-ui";
import queue from '@/api/queue/queue'
import checkPermission from '@/utils/permission' // 权限判断函数

export default {
  mixins: [crud(), pagination()],
  props: {
    permission: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      form: [],
      allColumnsSelected: true,
      allColumnsSelectedIndeterminate: false,
      qryParam: "",
      qryCloum: "",
      num: 0,
      centerDialogVisible: false,
      sortType: "",
      selectionParam: {}
    };
  },
  created() {
    this.crud.updateProp("searchToggle", true);
  },
  methods: {
    checkPermission,
    toDelete(datas) {
      this.$confirm(`确认删除选中的${datas.length}条数据?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.crud.delAllLoading = true;
          this.crud.doDeleteByPkId(datas);
        })
        .catch(() => {
        });
    },
    toEdit(data) {
      this.crud.editType.changeStatus = true;
      this.crud.editType.changeBizDate = true;
      this.crud.toEdit(data);
    },
    changeStatus(data) {
      let formData = {selections: data, jobStatus: ""}
      this.crud.editType.changeStatus = true;
      this.crud.toEdit(formData);
    },
    changeBizDate(data) {
      let bizDate = data[0].bizDate;
      for (let i = 0; i < data.length; i++) {
        if (bizDate != null && bizDate != data[i].bizDate) {
          MessageBox.alert(`请选中相同业务日期的多条记录!`, "提示", {
            confirmButtonText: "确定",
            type: "warning"
          });
          return;
        }
      }
      let formData = {selections: data, bizDate: bizDate}
      this.crud.editType.changeBizDate = true;
      this.crud.toEdit(formData);
    },
    handleCheckAllChange(val) {
      if (val === false) {
        this.$message({
          message: '请至少选择一列',
          type: 'warning'
        });
        this.allColumnsSelected = true;
        return;
      }
      for (const key in this.crud.props.tableColumns) {
        this.crud.props.tableColumns[key].visible = val;
      }
      this.allColumnsSelected = val;
      this.allColumnsSelectedIndeterminate = false;
    },
    handleCheckedTableColumnsChange(item) {
      let totalCount = 0;
      let selectedCount = 0;
      for (const key in this.crud.props.tableColumns) {
        ++totalCount;
        selectedCount += this.crud.props.tableColumns[key].visible ? 1 : 0;
      }
      if (selectedCount === 0) {
        this.crud.notify("请至少选择一列", CRUD.NOTIFICATION_TYPE.WARNING);
        this.$nextTick(function () {
          item.visible = true;
        });
        return;
      }
      this.allColumnsSelected = selectedCount === totalCount;
      this.allColumnsSelectedIndeterminate =
        selectedCount !== totalCount && selectedCount !== 0;
    },
    toggleSearch() {
      this.crud.props.searchToggle = !this.crud.props.searchToggle;
    },
    paramChange(value) {
      this.qryParam = value;
    },
    cloumChange(value) {
      this.qryCloum = value;
      for (let key in this.crud.query) {
        if (key != this.qryCloum) {
          delete this.crud.query[key]
        }
      }
    },
    doReply() {
      this.crud.findVM('presenter').$refs['table'].clearFilter()
      this.crud.query = {}
      this.qryParam = ''
      this.qryCloum = ''
      this.crud.toQuery()
    },
    doQuery() {
      var key = "";
      var value = "";
      if (this.qryCloum == null || this.qryCloum == '') {
        this.$message({
          message: '请先选择搜索项',
          type: 'warning'
        });
        return;
      }
      if (this.qryCloum != null && this.qryCloum != "") {
        key = this.qryCloum;
      }
      if (this.qryParam != "" && this.qryParam != null) {
        value = this.qryParam;
      }
      this.crud.query[key] = value;
      this.crud.toQuery();
    },
    toRunImplement(param) {
      queue.toRunImplement(param).then(res => {
        this.crud.toQuery();
        this.$notify({
          title: '执行成功',
          type: 'success',
          duration: 2500
        })
      }).catch(res => {
        this.$notify.error({
          title: '执行错误',
          message: res.response.data
        });
      })
    },
    toRunSort(param, type) {
      this.selectionParam = param;
      this.sortType = type;
      this.centerDialogVisible = true;
    },
    toRunTop(param) {
      queue.toRunTop(param).then(res => {
        this.$notify({
          title: '置顶成功',
          type: 'success',
          duration: 2500
        })
      })
    },
    toRunRemove(param) {
      queue.toRunListRemove(param).then(res => {
        this.crud.toQuery();
        this.$notify({
          title: '移除成功',
          type: 'success',
          duration: 2500
        })
      })
    },
    submintSort() {
      this.selectionParam.sortType = this.sortType
      this.selectionParam.num = this.num;
      queue.toRunSort(this.selectionParam).then(res => {
        this.$notify({
          title: '升降序成功',
          type: 'success',
          duration: 2500
        })
        this.centerDialogVisible = false;
      })
    },
    channel() {
      this.num = 0;
      this.centerDialogVisible = false;
    }
  }
};
</script>

<style>
.crud-opts {
  padding: 6px 0;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}

.crud-opts .crud-opts-right {
  margin-left: auto;
}
</style>
